<template>
  <div class="content">
    <el-input
      v-model="input"
      class="input"
      placeholder="请输入新增分类"
    ></el-input>
    <el-button type="primary">新增</el-button>
    <el-button type="primary" @click="resetForm" class="backBtn"
      >返回</el-button
    >
    <div class="tag">
      <el-tag
        v-for="item in categoryList"
        :key="item.id"
        class="tag-item"
        closable
        @close="handleClose(item)"
      >
        {{ item.name }}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      info: "",
      categoryList: [
        {
          id: 1,
          name: "分类",
        },
      ],
    };
  },
  methods: {
    handleClose(item) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.categoryList.splice(this.categoryList.indexOf(item), 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForm() {
      console.log(this.$route);
      this.$router.push({
        path: "/afterSale/addAfterSale",
        query: { info: this.info },
      });
    },
  },
  created() {
    this.info = this.$route.query.info;
    this.categoryList = this.$route.query.editInfo;
    console.log(this.$route);
  },
};
</script>

<style>
.content {
  margin: 20px;
}
.input {
  width: 400px;
  margin-right: 20px;
}
.tag-item {
  margin: 20px 10px;
  width: 400px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.el-tag .el-icon-close {
  margin-left: 280px;
  font-size: 16px;
}
.el-tag__close .el-icon-close::before {
  margin: 400px;
}
</style>